<template>
  <div class="info">
    <MemberInfo v-if="memberType === 'friend'"/>
    <GroupInfo v-if="memberType === 'group'"/>
    <DefaultPanel v-if="memberType === 'defaul'"/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import _ from 'lodash'
import MemberInfo from './MemberInfo'
import GroupInfo from './GroupInfo'
import DefaultPanel from '../DefaultPanel'
export default {
  components: { MemberInfo, GroupInfo, DefaultPanel },
  computed: {
    ...mapState('app', ['friendList', 'groupList', 'selectMember']),
    memberType: function () {
      const friendIndex = _.findIndex(this.friendList, e => e.roomId + '' === this.selectMember.roomId + '')
      const groupIndex = _.findIndex(this.groupList, e => e.roomId + '' === this.selectMember.roomId + '')
      if (friendIndex !== -1) {
        return 'friend'
      } else if (groupIndex !== -1) {
        return 'group'
      } else {
        return 'defaul'
      }
    }
  },
  created () {
    // console.log('this', this)
  }
}
</script>

<style lang="scss" scoped>
.info {
  border-left: 1px solid #eee;
}
</style>
